<template>


<!-- 两层banner -->
  <div class="banner" 
    style="opacity:0.5; width:100%; height: 150%; "
  >
    <div class="container-width app-container container warp" style="width:100%;">
      <el-carousel height="380px" class="ads" v-if="pageData.swiperADS.length > 0" 
        autoplay="false" indicator-position="none" arrow="never"
        ref="carouselBackground"
      >
        <el-carousel-item v-for="(item, index) in pageData.swiperADS" :key="index">
          <!-- <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start"> -->
          <a target="_blank" :href="item.jumpPage"
            ><el-image
              class="swiper-img" 
              :alt="item.briefDescribe" 
              :src="item.imgPath" 
            >
            </el-image>
          </a>
          <!-- </el-tooltip> -->
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>

  <div class="container-width app-container container warp"  style="padding-bottom:40px; margin-top:-340px;">
    <el-carousel height="300px" class="ads" v-if="pageData.swiperADS.length > 0" 
      @change="bannerChange"
    >
      <el-carousel-item v-for="(item, index) in pageData.swiperADS" :key="index">
        <!-- <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start"> -->
        <a target="_blank" :href="item.jumpPage"
          ><el-image
            class="swiper-img" 
            :alt="item.briefDescribe" 
            :src="item.imgPath" 
          ></el-image
        ></a>
        <!-- </el-tooltip> -->
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 两层banner end -->
  <!-- 后续需要改成同步滚动-->

  <!-- 发现吧 -->

  <div class="faxianba" 
    style="width:100%;background-image:url(../../../src/assets/images/faxianba_bg.png);padding-top:40px;padding-bottom:120px;"
  >
    <div class="container-width app-container container warp"
    >
      <itemLabelBa
        name="发 现 吧"
        :isHot="false"
        :more="false"
        :hot="0"
        v-if="pageData.courses.length > 0"
      ></itemLabelBa>
    
      <el-row type="flex" style="flex-wrap: wrap; justify-content:center;">
        <el-col
          :span="5"
          :offset="index % 4 ? 1 : 0"
          v-for="(item, index) in pageData.courses"
          :key="`class_${index}`"
        >
          <courseItemFaxianba :courseItem="item"></courseItemFaxianba>
        </el-col>
      </el-row>

  <!-- 
      <itemLabel
        v-if="pageData.teachers.length > 0"
        name="热门老师"
        :isHot="true"
        :hot="5"
      ></itemLabel>
      <el-row type="flex" style="flex-wrap: wrap" justify="space-between">
        <el-col
          style="margin-bottom: 20px"
          :span="11"
          v-for="(teacher, index) in pageData.teachers"
          :key="`teacher_${index}`"
        >
          <teacherItem :teacher="teacher"></teacherItem>
        </el-col>
      </el-row>

      <itemLabel name="会员套餐" :hot="4"></itemLabel>
      <el-row type="flex" style="flex-wrap: wrap">
        <el-col
          :span="6"
          v-for="(vipSet, index) in vipSets"
          :key="`teacher_${index}`"
        >
          <vipItem :vipSet="vipSet"></vipItem>
        </el-col>
      </el-row>

      <div>
        <itemLabel name="合作学校"></itemLabel>
        <div
          type="flex"
          class="schools"
          flex="main:justify"
          style="flex-wrap: wrap; display:flex; justify-content:space-between;"
        >
          <img
            class="school-item"
            v-for="(item, index) in school"
            :key="index"
            :src="item.img"
          />
        </div>
      </div>

  -->
    </div>
  </div>

  <!-- 精品课 -->
  <div class="faxianba " 
    style="width:100%;height:786px;background-image:url(../../../src/assets/images/jingpinke_bg.png);
    padding-top:40px;padding-bottom:120px; "
  >    <!-- box-shadow:0 0 50px 30px #ffffff inset; -->
    <div class="container-width app-container container warp"
      style="display:flex; justify-content:left; align-item:center; height:620px; margin-top: 80px;"
    >
      <div class="jingpinke-left" 
        style="height:100%;width:300px; background:#FFF2E9 url(../../../src/assets/images/jingpinke_left.png);
        display:flex; flex-direction: column; justify-content:center; place-content: flex-start; border-radius: 10px 0 0 10px;">
        <p style=" display: flex; justify-content: center; margin-top: 20px; line-height: 30px; color: #111; font-weight: 500;">
          精品课
        </p>
        <p style="display:flex; justify-content:flex-start; line-height:40px; margin-left:20px; margin-top:20px; ">
          <span style="background:url(../../../src/assets/images/labels/jingpinke_label.png); background-repeat: no-repeat;
            width: 150px; padding-left: 35px;"
          >
            unity3D
          </span>
        </p>
        <p style="font-size:14px;margin: 20px; color:#808080; height: 80px;">
          Unity3D，简称U3D，是一款强大的跨平台游戏开发引擎，《王者荣耀》、《绝地求生》以及VR/AR等都可以用Unity3D进行开发，是现今优秀的3D引擎之一。
        </p>
        <p
         style="display:flex; justify-content:right; line-height:40px; margin-left:20px; margin-top:20px; margin-right:20px; "
        >
          <span style="background: url(../../../src/assets/images/labels/jingpinke_label.png); background-repeat: no-repeat;
            width:150px; padding-left: 45px;"
          >
            UE4
          </span>
        </p>
        <p style="font-size:14px;margin: 20px; color:#808080; height: 80px;">
          UE4 ，即Unreal Engine 4，它是一套为开发实时技术而存在的引擎工具，能够通过实时渲染，从NPC、人物角色、道具、AI等等方面很好地对游戏进行开发编辑。
        </p>
      </div>

      <div class="jingpinke-right" style="width:75%; height:100%;">
        <el-row type="flex" style="flex-wrap: wrap; 
          align-items: flex-start; justify-content: left; align-content: space-between; height: 100%; ">
          <el-col
            :span="7"
            :offset="index % 3 ? 1 : 0"
            v-for="(item, index) in pageData.courses"
            :key="`class_${index}`"
          >
            <courseItem :courseItem="item" v-bind:radiusArr="(index % 3 == 0 ?['0 10px 10px 0', '0 10px 0 0']:['10px 10px 10px 10px', '10px 10px 0 0'])"></courseItem>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>


  <!--录播课-->
  <div class="faxianba " 
    style="width:100%;height:786px;background-image:url(../../../src/assets/images/luboke_bg.png);
    padding-top:40px;padding-bottom:120px; margin-top: 40px;">
    <div class="container-width app-container container warp"
      style="display:flex; justify-content:left; align-item:center; height:620px; margin-top: 80px;">
      <div class="luboke-left" style="width:75%; height:100%;">
        <el-row type="flex" style="flex-wrap: wrap; 
          align-items: flex-end; justify-content: right; align-content: space-between; height: 100%; ">
          <el-col
            :span="7"
            :offset="index % 3 ? 1 : 0"
            v-for="(item, index) in pageData.courses"
            :key="`class_${index}`"
          >
            <courseItem :courseItem="item" v-bind:radiusArr="((index % 3 == 2) || (index + 1 >= pageData.courses.length) ?['10px 0 0 10px', '10px 0 0 0']:['10px 10px 10px 10px', '10px 10px 0 0'])"></courseItem>
          </el-col>
        </el-row>
      </div>
      <div class="luboke-right" 
        style="height:100%;width:300px; background:#FFF2E9 url(../../../src/assets/images/luboke_right.png);background-position-x: 75%;
        display:flex; flex-direction: column; justify-content: center; place-content: flex-start; border-radius: 0 10px 10px 0;">
        <p style=" display: flex; justify-content: center; margin-top: 20px; line-height: 30px; color: #111; font-weight: 500;">
          精品课
        </p>
        <p style="display:flex; justify-content:flex-start; line-height:40px; margin-left:20px; margin-top:20px; ">
          <span style="background:url(../../../src/assets/images/labels/jingpinke_label.png); background-repeat: no-repeat;
            width: 150px; padding-left: 35px;"
          >
            unity3D
          </span>
        </p>
        <p style="font-size:14px;margin: 20px; color:#808080; height: 80px;">
          Unity3D，简称U3D，是一款强大的跨平台游戏开发引擎，《王者荣耀》、《绝地求生》以及VR/AR等都可以用Unity3D进行开发，是现今优秀的3D引擎之一。
        </p>
        <p
          style="display:flex; justify-content:right; line-height:40px; margin-left:20px; margin-top:20px; margin-right:20px; "
        >
          <span style="background: url(../../../src/assets/images/labels/jingpinke_label.png); background-repeat: no-repeat;
            width:150px; padding-left: 45px;"
          >
            UE4
          </span>
        </p>
        <p style="font-size:14px;margin: 20px; color:#808080; height: 80px;">
          UE4 ，即Unreal Engine 4，它是一套为开发实时技术而存在的引擎工具，能够通过实时渲染，从NPC、人物角色、道具、AI等等方面很好地对游戏进行开发编辑。
        </p>
      </div>
    </div>
  </div>

  <!--好玩吧和福利吧放在一个div里，bg同一张-->
  <div class="faxianba"   
    style="background-image: url(../../../src/assets/images/haowanba_bg.png);
    background-position-y:50px; background-repeat:no-repeat;
      margin-top: 20px;">
    <!--好玩吧-->
    <div class="container-width app-container container warp"
      style="display:flex; flex-direction: column; height:670px;
      background-image: url(../../../src/assets/images/haowanba_bg2.png); background-size:contain; background-repeat:no-repeat;"
    >
      <itemLabelBa
        name="好 玩 吧"
        :isHot="false"
        :more="false"
        :hot="0"
        v-if="pageData.courses.length > 0"
      ></itemLabelBa>

      <div style="display:flex; flex-direction: row;">
        <div style="display:flex; flex-direction: column; width:450px; padding-left:140px; margin-top:20px;">
          <el-image style="height: 300px; width: 300px;" src="../../../src/assets/images/haowanba_left.png" fit="fill" />
          <p style="padding: 0 20px 0 20px;">闪电玩</p>
          <p style="padding: 0px 30px 0px 20px; font-size: 10px;">
            玩游戏得积分，玩的越多积分越多，让你在学习的过程中也可以娱乐，娱乐的过程中同样也可以后的收获。
          </p>
        </div>
        <div style="display:flex; flex-direction:column; justify-content: evenly;">
          <div style="display:flex; width:510px; flex-direction:row; justify-content: space-evenly;
            margin-top: 90px; padding: 10px 20px; background-color:#9494FF; border-radius: 0 58px 0 0;">
            <div style="width:200px; border-radius: 10px;background-color:white;">
              <el-image style="height: 130px; width: 200px;" src="../../../src/assets/images/haowanba_right_1.png" fit="fill" />
              <p style="font-size:16px; color:#1a1a1a; padding: 0px 10px 0px 10px; ">青灵御剑诀</p>
              <p style="font-size:10px; padding: 0px 10px 0px 10px;">火爆御剑诀游戏,神装羽翼,百变幻形,自由 战斗模式,震撼3D视觉效果,御剑......</p>
            </div>
            <div style="width:200px; border-radius: 10px;background-color:white;">
              <el-image style="height: 130px; width: 200px;" src="../../../src/assets/images/haowanba_right_2.png" fit="fill" />
              <p style="font-size:16px; color:#1a1a1a; padding: 0px 10px 0px 10px; ">九州仙剑传</p>
              <p style="font-size:10px; padding: 0px 10px 0px 10px;">火爆御剑诀游戏,神装羽翼,百变幻形,自由 战斗模式,震撼3D视觉效果,御剑......</p>
            </div>
          </div>
          <div style="display:flex; justify-content:center; margin-top:20px;"> 
          <el-button type="primary" size="large" round disabled style="width:200px;">敬请期待</el-button>
            
          </div>
        </div>
      </div>

    </div>

    <!-- 福利吧 -->

    <div class="container-width app-container container warp" style="display:flex; flex-direction: column;">
      <itemLabelBa
        name="福 利 吧"
        :isHot="false"
        :more="false"
        :hot="0"
        v-if="pageData.courses.length > 0" 
      ></itemLabelBa>

      <div class="container-width app-container container warp" 
        style="display:flex; flex-direction: row; justify-content:space-between; z-index:10;"
      >
        <div class="fuli-left" style="padding:20px 0; height:500px; width:300px;
          background-image: url(../../../src/assets/images/fuliba_left_test.png);
        ">
          <!--<el-image style="margin-top: -85px;" src="../../../src/assets/images/fuliba_right.png" fit="fill" />-->
        </div>
        <div style="padding:20px 0; height:500px; width:350px;
          background-color:rgb(197, 224, 251); background-image: url(../../../src/assets/images/bonus_ticket.png);
          transform: skew(-10deg);">
          <el-image style="transform: skew(10deg); margin-top: -85px;" src="../../../src/assets/images/fuliba_right.png" fit="fill" />
        </div>
        <div class="fuli-right" style="padding:20px 0; height:500px; width:350px;
          background-color:rgb(197, 224, 251); background-image: url(../../../src/assets/images/bonus_ticket.png);
          ">
          <el-image style="margin-top: -85px;margin-left: 48px;" src="../../../src/assets/images/fuliba_right.png" fit="fill" />
        </div>
      </div>
    </div>
  </div>

  
</template>

<script lang="ts" setup>

  import { reactive, computed, onMounted } from 'vue'
  import news from "../homePage/homePageNewsItem.vue";
  import courseItem from "/@/components/courseItem/index.vue";
  import courseItemFaxianba from "/@/components/courseItem/courseItemFaxianba.vue";
  import itemLabel from "/@/components/itemLabel/index.vue";
  import itemLabelBa from "/@/components/itemLabel/itemLabelBa.vue";
  import vipItem from "/@/components/vip/vipItem.vue";
  import teacherItem from "/@/components/teacherItem/index.vue";
  // import {
  //   bannerList,
  //   newsList,
  //   hotCourseList,
  //   teacherList,
  // } from "/@/api/homePage";

  import {useHomePageState} from '/@/store/modules/homePage';

  //合作院校
  const school = [
          {
            img: "../../../../src/assets/images/school/浙江经济职业技术学院@2x.png", // "/@/assets/images/school/浙江经济职业技术学院@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/杭州职业技术学院@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/浙江树人学院@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/合肥共达@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/浙江工业大学之江学院@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/中国计量大学@2x.png"
          },
          {
            img: "../../../../src/assets/images/school/浙江经贸职业技术学院@2x.png"
          }
  ]
  const pageData = reactive({
    swiperADS :[],  
    news :[],
    courses :[],
    teachers:[],
    // backgroundBanner:""
  });
  //const swiperADS = []
  //const teachers = []
  //const newsInfos = reactive([])
  //const courses = []
  const vipSets = [
          {
            label: "新用户专享",
            name: "年会员",
            price: "498",
            text: "41.5元/月",
            first: true,
          },
          {
            label: "",
            name: "月会员",
            price: "108",
            text: "108元/月",
            first: false,
          },
          {
            label: "超值推荐",
            name: "季会员",
            price: "288",
            text: "96元/月",
            first: false,
          },
          {
            label: "限时优惠",
            name: "年会员",
            price: "998",
            text: "93.16元/月",
            first: false,
          },
        ];

  const homePageState = useHomePageState();

  onMounted( async () =>{
    pageData.swiperADS = await homePageState.getBanners();
    pageData.news = await homePageState.getNews();
    pageData.courses = await homePageState.getHotCourses(); // 学生首页推荐课程
    pageData.teachers = await homePageState.getHotTeachers(); // 推荐教师

    //pageData.backgroundBanner = pageData.swiperADS[0].imgPath;
  });

  import router from "/@/router";
  const moreNews = () => {
        router.push({ name: "newsList" });
        //this.$router.push({ name: "newsList" });
        //console.log("moreNews")
      };

  const carouselBackground = ref<HTMLFormElement>();
  const bannerChange = (cur, next) => { // 同步不太好， 需要试试用settimeout
    // console.log("cur" + cur);
    // console.log("next" + next);
    // console.log(carouselBackground);
    // pageData.backgroundBanner = pageData.swiperADS[cur].imgPath;
    carouselBackground.value?.setActiveItem(next);
    //console.log("bannerChanged");
  }

</script>

<style lang="scss" scoped>

  .ads {
    border-radius: 6px;
    /* margin-top:60px  */
  }
  .swiper-img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .schools {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px #fdf9f7;
  }

  .school-item {
    height: 70px;
    margin: 30px 0 0 0;
  }
  .more {
    cursor: pointer;
  }

  .banner {
    padding-top:80px;
  }

  // .fuli-left::after {
  //   content:"";
  //   position: absolute;
  //   height:500px;
  //   width:100px;
  //   margin-top:-20px;
  //   // margin-left:205px;
  //   background-color:rgb(197, 224, 251); 
  //   transform: skew(-10deg);
  //   z-index:-1;
  // }
  
  .fuli-right::before {
    content:"";
    position: absolute;
    height:500px;
    width:100px;
    margin-top:-20px;
    margin-left:-56px;
    background-color:rgb(197, 224, 251); 
    transform: skew(-10deg);
    z-index:-1;
  }
</style>

